<template>
    <el-row>
        <el-col :span="12" :offset="6" style="margin-top:1em;">
        <search-form :form="form" :search="getArticleList"></search-form></el-col>
    </el-row>
    <div v-if="articles.length != 0">
        <article-list :articles="articles" style="width:80%"></article-list>
        <el-pagination
            style="margin-top: 1em"
            background
            layout="prev, pager, next"
            :current-page="page"
            :page-size="pageSize"
            :total="total"
            @current-change="turnPage"
            class="my-pagination"
            :hide-on-single-page="true"
        ></el-pagination>
    </div>
    <el-empty description="未找到" v-if="articles.length == 0"></el-empty>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import SearchForm from '../components/SearchForm.vue'
import { getArticles } from '../api/articles'
import ArticleList from '../components/ArticleList.vue'
import bus from '../utils'
export default {
    components: { SearchForm, ArticleList },
    setup() {
        const form = ref({
            searchType: 'title',
            keywords: ''
        })
        const route = useRoute()
        const articles = ref([])
        const page = ref(1)
        const total = ref(0)
        const pageSize = 10

        const getArticleList = (page) => {
            console.log("keywords=", form.value, 'end')
            console.log("page", page)
            if (isNaN(page)) page = 1
            if (form.value.keywords == '') return
            getArticles(page - 1, pageSize, "false", "false",[],null, form.value.keywords, form.value.searchType).then(res => {
                articles.value = res.data.items
                total.value = res.data.total
            })
        }

        const turnPage = (pageNumber) => {
            page.value = pageNumber;
            getArticleList(page.value);
        };

        onMounted(() => {
            bus.emit("showSearchForm", false)
            console.log("on mounted form", form)
            console.log('route is', route.params)
            let params = route.params
            if (params.searchType) form.value.searchType = params.searchType
            if (params.keywords) form.value.keywords = params.keywords
            getArticleList(1)
        })

        onUnmounted(() => {
            bus.emit("showSearchForm", true)
        })
        return {
            form, getArticleList, articles, page, total, pageSize,turnPage
        }
    }

}
</script>

<style>
</style>